<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.bg-color {
				background-color: #3B559F;
				box-shadow: none;
			}
			
			.bg-color div {
				font-size: 90%;
				color: #FFFFFF;
				margin-left: 1%;
				margin-top: 12px;
			}
			
			.dingwei-png {
				width: 16px;
				height: 16px;
			}
			
			.bg-color .add-png {
				width: 5%;
				float: right;
				margin-top: -22px;
				margin-right: 1%;
			}
			
			.mui-bar~.mui-content .mui-fullscreen {
				top: 44px;
				height: auto;
			}
			
			.mui-pull-top-tips {
				position: absolute;
				top: -20px;
				left: 50%;
				margin-left: -25px;
				width: 30px;
				height: 30px;
				border-radius: 100%;
				z-index: 1;
			}
			
			.mui-bar~.mui-pull-top-tips {
				top: 24px;
			}
			
			.mui-pull-top-wrapper {
				width: 32px;
				height: 32px;
				display: block;
				text-align: center;
				background-color: #efeff4;
				border: 1px solid #ddd;
				border-radius: 25px;
				background-clip: padding-box;
				box-shadow: 0 4px 10px #bbb;
				overflow: hidden;
			}
			
			.mui-pull-top-tips.mui-transitioning {
				-webkit-transition-duration: 200ms;
				transition-duration: 200ms;
			}
			
			.mui-pull-top-tips .mui-pull-loading {
				/*-webkit-backface-visibility: hidden;
				-webkit-transition-duration: 400ms;
				transition-duration: 400ms;*/
				margin: 0;
			}
			
			.mui-pull-top-wrapper .mui-icon,
			.mui-pull-top-wrapper .mui-spinner {
				margin-top: 7px;
			}
			
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
			}
			
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 30px;
				color: #777;
			}
			
			.mui-pull-top-canvas {
				overflow: hidden;
				background-color: #fafafa;
				border-radius: 40px;
				box-shadow: 0 4px 10px #bbb;
				width: 30px;
				height: 30px;
				margin: 0 auto;
			}
			
			.mui-pull-top-canvas canvas {
				width: 30px;
			}
			
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
			
			.mui-scroll {
				width: 100%!important;
				height: auto!important;
				border: 0!important;
			}
			
			.mui-control-item {
				width: 33.33%!important;
			}
			
			.height-div {
				margin-top: 1px;
			}
			
			.mui-scroll-wrapper {
				margin-left: 0;
				padding: 0!important;
			}
			
			.mui-scroll-wrapper ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			
			.mui-slider-group {
				margin-top: -2px;
			}
			
			.ul-licontent {
				border-bottom: 1px solid #F7F7F7;
			}
			
			.ul-licontent .text1 {
				float: right;
				color: red;
			}
			
			.ul-licontent .text2 {
				margin-left: 5%;
			}
			
			.mui-card {
				width: 100%;
				margin-left: 0;
				margin-top: 0;
				box-shadow: none;
				margin-bottom: 0;
				padding: 0;
			}
			
			.ul-licontent {
				width: 100%;
			}
			
			.imggg {
				width: 35px!important;
			}
			
			.fiends-div {
				width: 100%;
				background-color: #FFFFFF;
				border-bottom: 1px solid #F7F7F7;
				padding: 3% 0;
				font-size: 100%;
				display: flex;
				flex-wrap: nowrap;
			}
			
			.imggs-div {
				width: 25%;
				margin-right: 3%;
				margin-left: 3%;
				border-radius: 2px;
				overflow: hidden;
			}
			
			.conttext-div {
				width: 69%;
				display: flex;
				flex-wrap: wrap;
				padding: 0;
			}
			
			.conttext-div .div1 {
				display: block;
				width: 100%;
				padding: 0;
				font-size: 100%;
			}
			
			.div2 {
				color: red;
				font-size: 80%;
			}
			
			.div3 {
				color: #A9A9A9;
				font-size: 80%;
			}
			
			.search-div {
				position: fixed;
				width: 40px;
				height: 40px;
				top: 80%;
				right: 5%;
				z-index: 999;
				background-color: white;
				border-radius: 20px;
				animation: myfirst 2s infinite;
				opacity: 0.9;
				border: 1px solid #F7F7F7;
			}
			
			.search-div img {
				position: fixed;
				width: 25px;
				height: 25px;
				margin: 7.5px 7.5px;
			}
			
			.schoolarea {
				float: right;
				margin-right: 4%
			}
			
			@keyframes myfirst {
				0% {
					transform: translate(0px, 0px);
				}
				50% {
					transform: translate(0px, -10px);
				}
				100% {
					transform: translate(0px, 0px);
				}
			}
			
			.mui-slider-item {
				border: 0!important;
				width: 100%;
				height: 100%;
				list-style: none!important;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar bg-color mui-bar-nav " id="header">
			<div id="dingwei-div"><span id="dingwei"><img src="../images/qiehuan.png" class="dingwei-png" /><text id="dingwei-text"></text></span></div>
			<img src="../images/some.png" class="add-png" id="add-png">
		</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted height-div">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile">
							校园发布
						</a>
						<a class="mui-control-item" href="#item2mobile">
							社会发布
						</a>
						<a class="mui-control-item" href="#item3mobile">
							二手市场
						</a>
					</div>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4" style="margin-top: -2px;z-index: 99;position: relative;"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" id="jianzhi1"></ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" id="jianzhi2"></ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" id="jianzhi3"></ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="search-div" id="search">
			<img src="../images/sousuo1.png" />
		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.pullToRefresh.js"></script>
		<script src="../js/mui.pullToRefresh.material.js"></script>
		<script src="../js/immersed.js"></script>
		<script src="../js/arttmpl.js"></script>
		<script type="text/javascript">
			(function($) {
				$.init();
				//阻尼系数
				var deceleration = mui.os.ios ? 0.003 : 0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration: deceleration
				});
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							down: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
										self.endPullDownToRefresh();
									}, 1000);
								}
							},
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										ul.appendChild(createFragment(ul, index, 5));
										self.endPullUpToRefresh();
									}, 1000);
								}
							}
						});
					});
					var createFragment = function(ul, index, count, reverse) {
						var length = ul.querySelectorAll('li').length;
						var fragment = document.createDocumentFragment();
//						var li;
//						for(var i = 0; i < count; i++) {
//							li = document.createElement('li');
//							li.className = 'mui-table-view-cell';
//							li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
//							fragment.appendChild(li);
//						}
						return fragment;
					};
				});

				var schoolfabu = function() {
					mui.ajax('https://www.lunyuwang.com/taskController/queryCollageModel', {
						data: {
							lyuser_Card: plus.storage.getItem("card")
						},
						crossDomain: true, //强制使用5+跨域
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						//processData: false,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: function(data) {
							var str = template('list-jianzhi12', {
								"record": data.collageTaskList
							})
							document.getElementById('jianzhi1').innerHTML = str;
						},
						error: function(xhr, type, errorThrown) {
							mui.toast('发布异常!')
						}
					})
				}

				var societyfabu = function(city) {
					mui.ajax('https://www.lunyuwang.com/taskController/querySociologyModel', {
						data: {
							lytask_City: city + "市"
						},
						crossDomain: true, //强制使用5+跨域
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						//processData: false,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: function(data) {
							var tasklist = [];
							if(data.sociologyTaskList){
								tasklist = data.sociologyTaskList;
							}else if(data.sociologyOneTaskList){
								tasklist[0] = data.sociologyOneTaskList;
							}else{
								console.log(1111111);
								document.getElementById('jianzhi2').innerHTML = '';
								return ;
							}
							var str = template('list-jianzhi12', {
								"record": tasklist
							})
							document.getElementById('jianzhi2').innerHTML = str;

						},
						error: function(xhr, type, errorThrown) {
							mui.toast('s发布异常!')
						}
					})
				}

				var goodsshow = function(city) {
					mui.ajax('https://www.lunyuwang.com/taskController/queryGoodByCity', {
						data: {
							lygood_City: city + "市"
						},
						crossDomain: true, //强制使用5+跨域
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						//processData: false,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: function(data) {
							var allcontentt = data.goodList;
							if(allcontentt == '0'){
								document.getElementById('jianzhi3').innerHTML = '';
								return ;
							}
							for(var i = 0; i < allcontentt.length; i++) {
								var a = [];
								var b = [];
								if(allcontentt[i].lygood_Collage.length > 10) {
									for(var k = 0; k < 10; k++) {
										b[j] = allcontentt[i].lygood_Collage[k];
									}
									allcontentt[i].lygood_Collage = b.join("") + "..."
								}
								if(allcontentt[i].lygood_Text.length > 25) {
									for(var j = 0; j < 25; j++) {
										a[j] = allcontentt[i].lygood_Text[j]
									}
									allcontentt[i].lygood_Text = a.join("") + "...";
								}
							}
							var str = template('list-jianzhi3', {
								"record": allcontentt

							})
							document.getElementById('jianzhi3').innerHTML = str;
							var viewwidth = document.body.clientWidth;
							var divimg = document.getElementsByClassName('imggs-div');
							mui('.imggs-div').each(function() {
								this.style.height = "-webkit-calc(" + viewwidth * 0.25 + "px)";
								var num = viewwidth * 0.25 * 0.428 / 2;
								this.getElementsByTagName("img")[0].style.cssText = "width: -webkit-calc(" + viewwidth * 0.25 * 1.428 + "px);height: -webkit-calc(" + viewwidth * 0.25 + "px);margin-left: -webkit-calc(" + (-num) + "px)"
							})
						},
						error: function(xhr, type, errorThrown) {
							mui.toast('发布异常!')
						}
					})
				}

				var serschooljianzhi = function(card , sect) {
					mui.ajax('https://www.lunyuwang.com/taskController/queryCollageTaskByKeyword', {
						data: {
							lyuser_Card: card,
							keyWord: sect
						},
						crossDomain: true, //强制使用5+跨域
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						//processData: false,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: function(data) {
							console.log(JSON.stringify(data.queryCollageTaskList));
							var str = template('list-jianzhi12', {
								"record": data.queryCollageTaskList
							})
							document.getElementById('jianzhi1').innerHTML = str;

						},
						error: function(xhr, type, errorThrown) {
							mui.toast('发布异常!')
						}
					})
				}

				var sersocietyjianzhi = function(city , sert) {
					mui.ajax('https://www.lunyuwang.com/taskController/querySocrityTaskByKeyword', {
						data: {
							lytask_City: city + "市",
							keyWord: sert
						},
						crossDomain: true, //强制使用5+跨域
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						//processData: false,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: function(data) {
							console.log(JSON.stringify(data.querySocrityTaskList));
							var str = template('list-jianzhi12', {
								"record": data.querySocrityTaskList
							})
							document.getElementById('jianzhi2').innerHTML = str;
						},
						error: function(xhr, type, errorThrown) {
							mui.toast('发布异常!')
						}
					})
				}
				
				var secondhandmarket = function(sert) {
					mui.ajax('https://www.lunyuwang.com/taskController/queryGoodByKeyword', {
						data: {
							keyWord: sert
						},
						crossDomain: true, //强制使用5+跨域
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						//processData: false,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: function(data) {
							console.log(JSON.stringify(data.queryGoodByKeyWordList));
							var str = template('list-jianzhi3', {
								"record": data.queryGoodByKeyWordList
							})
							document.getElementById('jianzhi3').innerHTML = str;
							var viewwidth = document.body.clientWidth;
							var divimg = document.getElementsByClassName('imggs-div');
							mui('.imggs-div').each(function() {
								this.style.height = "-webkit-calc(" + viewwidth * 0.25 + "px)";
								var num = viewwidth * 0.25 * 0.428 / 2;
								this.getElementsByTagName("img")[0].style.cssText = "width: -webkit-calc(" + viewwidth * 0.25 * 1.428 + "px);height: -webkit-calc(" + viewwidth * 0.25 + "px);margin-left: -webkit-calc(" + (-num) + "px)"
							})
						},
						error: function(xhr, type, errorThrown) {
							mui.toast('发布异常!')
						}
					})
				}
				var sercont = '';
				mui.plusReady(function() {
					starbar();
					document.getElementById('slider').style.marginTop = immersed + 'px';
					var city = plus.storage.getItem("zrea");

					schoolfabu();
					societyfabu(city);
					goodsshow(city);

					document.getElementById("dingwei-text").textContent = plus.storage.getItem("zrea");

					document.getElementById('add-png').addEventListener('tap', function() {
						mui.openWindow({
							url: 'jianzhi/fabu.html',
							id: 'jainzhi/fabu.html'
						})
					})

					document.getElementById('dingwei').addEventListener('tap', function() {
						mui.openWindow({
							url: 'jianzhi/secarea.html',
							id: 'jainzhi/secarea.html'
						})
					})
					mui('.mui-table-view').on('tap', '.ul-licontent', function() {
						var id = this.getElementsByTagName('p')[0];
						var card = this.getElementsByTagName('p')[1];
						mui.openWindow({
							url: 'jianzhiXQ.html',
							id: 'jianzhiXQ.html',
							extras: {
								idd: id.textContent.replace(/<[^>]+>|&[^>]+;/g, "").trim(),
								card: card.textContent.replace(/<[^>]+>|&[^>]+;/g, "").trim()
							}
						})
					});
					mui('.mui-table-view').on('touchstart', '.mui-card', function() {
						this.style.cssText = 'background-color: #F7F7F7'
					}, false);
					mui('.mui-table-view').on('touchend', '.mui-card', function() {
						this.style.cssText = 'background-color: #FFFFFF';
					}, false);

					mui('.mui-table-view').on('touchstart', '.fiends-div', function() {
						this.style.cssText = 'background-color: #F7F7F7'
					}, false);
					mui('.mui-table-view').on('touchend', '.fiends-div', function() {
						this.style.cssText = 'background-color: #FFFFFF';
					}, false);

					document.getElementById('search').addEventListener('tap', function() {
						mui.openWindow({
							url: 'jianzhi/search.html',
							id: 'jianzhi/search.html',
							extras: {
								cityy: document.getElementById("dingwei-text").textContent
							}
						})
					})

					mui('#jianzhi3').on('tap', '.ul-liicontent', function() {
						var id = this.getElementsByTagName('p')[0];
						var card = this.getElementsByTagName('p')[1];
						mui.openWindow({
							url: 'jianzhi/twohandshop.html',
							id: 'jianzhi/twohandshop.html',
							extras: {
								idd: id.textContent.replace(/<[^>]+>|&[^>]+;/g, "").trim(),
								card: card.textContent.replace(/<[^>]+>|&[^>]+;/g, "").trim()
							}
						})
					})

				});

				window.addEventListener('zraa', function(event) {
					document.getElementById("dingwei-text").textContent = event.detail.aeaa;
					societyfabu(event.detail.aeaa);
					goodsshow(event.detail.aeaa); 
				})
				window.addEventListener('backcontent', function(event) {
					sercont = event.detail.sercontent;
					var typenum = event.detail.typeser;
 					if(typenum == '0') {
						serschooljianzhi(plus.storage.getItem("card") , sercont);
					} else if(typenum == '1') {
						sersocietyjianzhi(document.getElementById("dingwei-text").textContent , sercont)
					} else {
						secondhandmarket(sercont);
					}
				})

				//按两次返回键退出应用
				var first = null;
				mui.back = function() {
					mui.plusReady(function() {
						//首页返回键处理
						//处理逻辑：1秒内，连续两次按返回键，则退出应用；
						if(!first) {
							first = new Date().getTime();
							mui.toast('再按一次退出应用');
							setTimeout(function() {
								first = null;
							}, 1000);
						} else {
							if(new Date().getTime() - first < 1000) {
								plus.runtime.quit();
							}
						}
					});
				}

			})(mui);
		</script>

		<!--兼职列表渲染模板-->
		<script type="text/template" id="list-jianzhi12">
			<% for(var i in record){ var item=record[i]; %>
			<li class="ul-licontent">
				<p style="display: none;"><%=item.lytask_Id%></p>
				<p style="display: none;"><%=item.lyuser_Card%></p>
				<div class="mui-card">
					<div class="mui-card-header mui-card-media cardtop">
						<img src="<%=item.lyuser_FacePath%>" class="imggg" />
						<div class="mui-media-body">
							<%=item.lytask_Title%><text class='text1'><%=item.lytask_Pay%></text>
							<p>
								<%=item.lytask_Adress%><text class='text2'><%=item.lytask_Cycle%></text></p>
							<p>
								<%=item.lytask_Time.substring(0,19)%>
							</p>
						</div>
					</div>
				</div>
			</li>
			<% } %>
		</script>

		<!--二手市场列表渲染模板-->
		<script type="text/template" id="list-jianzhi3">
			<% for(var i in record){ var item=record[i]; %>
			<li class="ul-liicontent">
				<p style="display: none;"><%=item.lygood_Id%></p>
				<p style="display: none;"><%=item.lygood_Card%></p>
				<div class="fiends-div">
					<!--<text class="card-div"><%=item.card%></text>-->
					<div class="imggs-div">
						<img src="<%=item.lygood_Img.split(',')[0]%>" class="friend-heddimg" id="headmiggg" />
					</div>

					<div class="conttext-div">
						<div class="div1">
							<%=item.lygood_Text%>
						</div>
						<div class="div1 div2">
							￥
							<%=item.lygood_Price%>
						</div>
						<div class="div1 div3">
							<%=item.lygood_Area%>
							<% if(item.lygood_Collage != "0" ){ %>
							<div class="schoolarea">
								<%=item.lygood_Collage%>
							</div>
							<% } %>
						</div>
					</div>
				</div>
			</li>
			<% } %>
		</script>
	</body>

</html>